import React, { Component } from 'react'
import './valign.css'
import bigImg from './imgs/big1.png'
import img1 from './imgs/1.png'
import img2 from './imgs/2.png'
import img3 from './imgs/3.png'
import img4 from './imgs/4.png'
import img5 from './imgs/5.png'
import img6 from './imgs/6.png'

let style={
    bigimg:{
        'width':'600px',
        'height':'430px',
        'display':'inline-block',
    },
    comshow:{
        // 'width':'1200px',
        'height':'490px',
        'display':'inline-block',
    },
    imgdiv:{
        'width':'294px',
        'height':'280px',
    },
    comName:{
        'width':'294px',
        'textAlign':'center',
        'marginTop':'10px',
    },
    intro:{
        'width':'294px',
        'textAlign':'center',
        'marginTop':'10px',
    },
    price:{
        'width':'294px',
        'textAlign':'center',
        'marginTop':'20px',
        'color':'red',
    },
}

let arr1=[
    {
        img:img1,
        comName: '坚果 R1“足迹”系列保护套 美国邮政禁止邮寄儿童',
        intro: '1920 年 6 月 13 日',
        price: '￥ 99.00',
    },
    {
        img:img2,
        comName: '坚果 R1“足迹”系列保护套 《小王子》作者出生',
        intro: '1920 年 6 月 29 日',
        price: '￥ 99.00',
    },
]
let arr2=[
    {
        img:img3,
        comName: '坚果 R1 TUP 软胶保护套',
        intro: '经典配色，质感精良',
        price: '￥ 49.00',
    },
    {
        img:img4,
        comName: '坚果 R1 TPU 软胶半透明保护套',
        intro: '半透明设计，质感精良',
        price: '￥ 49.00',
    },
    {
        img:img5,
        comName: '坚果 Type-C To Type-C 数据线',
        intro: 'TPE 环保材质，PTC 过温保护',
        price: '￥ 49.00',
    },
    {
        img:img6,
        comName: '坚果闹钟式无线充电座',
        intro: '无线也能享受 10W 快充',
        price: '￥ 49.00',
    },
]

class Comshow extends Component {

    render() {
        return <div className="comshow">
            <div style={style.comshow}>
                <div className='bigImg valign' style={style.bigimg}>
                    <img src={bigImg} alt="error" style={style.bigimg}/>
                </div>

                {arr1.map((com, i) => <div key={i} className='comDiv' style={style.comshow}>

                    <div className='imgDiv' style={style.imgdiv}>
                        <img src={com.img} alt="error" style={style.imgdiv}/>
                    </div>

                    <div className='comName' style={style.comName}>
                        <strong>
                            {com.comName}
                        </strong>
                    </div>

                    <div className='intor' style={style.intro}>
                        {com.intro}
                    </div>

                    <div className='price' style={style.price}>
                        <strong>
                            {com.price}
                        </strong>
                    </div>

                </div>)}
            </div>
            <div>
                {arr2.map((com, i) => <div key={i} className='comDiv' style={style.comshow}>

                    <div className='imgDiv' style={style.imgdiv}>
                        <img src={com.img} alt="error" style={style.imgdiv}/>
                    </div>

                    <div className='comName' style={style.comName}>
                        <strong>
                            {com.comName}
                        </strong>
                    </div>

                    <div className='intor' style={style.intro}>
                        {com.intro}
                    </div>

                    <div className='price' style={style.price}>
                        <strong>
                            {com.price}
                        </strong>
                    </div>

                    </div>)}
            </div>
        </div>
    }
}

export default Comshow